<template>
	<view class="content">
		<uni-search-bar class="top-earch" placeholder="搜索商品" @confirm="" @input="" radius="50" />
		<scroll-view scroll-y class="left-aside">
			<view v-for="item in productOneCategoryList" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}"
			 @click="tabtap(item)">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="right-aside">
			<view class="right-aside-t" v-if="productTwoCategoryList.length>0">
				<scroll-view scroll-x="true" class="twocategory">
					<view :class="{active: '' === currentIdTwo}" @click="tabtapTwo('')">全部</view>
					<view v-for="item in productTwoCategoryList" :key="item.id" :class="{active: item.id === currentIdTwo}" @click="tabtapTwo(item.id)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<scroll-view scroll-y="true" class="right-aside-b" :class="{'right-aside-b1':isvv}" @scrolltolower="listtolower">
				<block v-for="(item,index) in goodsList" :key="index">
					<indproitem2 v-for="(items,indexs) in item" :iteminfo="items" :key="indexs" :usertype="usertype"></indproitem2>
				</block>
				<uni-load-more :status="listOver?'noMore': pageNo % maxPageNo == 0 ? 'more' : 'loading'" @tap="loadMoreClick"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import useach from '@/components/uni-search-bar/uni-search-bar.vue';
	import indproitem2 from '@/components/ind-pro-item2.vue';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";

	let pageSize = 5;
	let postIng = false;
	export default {
		components: {
			indproitem2,
			uniLoadMore
		},
		data() {
			return {
				listOver: 'loading',
				currentId: '',
				currentIdTwo: '',
				goodsList: [],
				productOneCategoryList: [], //一级分类
				productTwoCategoryList: [], //二级分类
				pageNo: 1,
				maxPageNo: 60,
				isvv: false,
				usertype: 0
			}
		},
		onLoad() {
			//获取一级分类
			this.getproductOneCategoryList();
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.usertype = uni.getStorageSync('userInfo').isAgent;
				//查询购物车数量
				this.$api.cartProductNum(uni.getStorageSync('userInfo').userCode);
			}
		},
		methods: {
			/*---------------------------------------点击----------------------------------------*/
			//一级分类点击
			tabtap(item) {
				this.currentId = item.id;
				this.currentIdTwo = '';
				this.productTwoCategoryList = [];
				this.goodsList = [];
				this.pageNo = 1;
				//请求二级分类列表
				this.getproductTwoCategoryList(item.id);

			},
			//二级分类点击
			tabtapTwo(id) {
				this.currentIdTwo = id;
				this.pageNo = 1;
				this.goodsList = [];
				//请求商品列表
				this.getgoodsList();
			},
			/**
			 * 加载更多
			 */
			loadMoreClick: function() {
				if (this.pageNo % this.maxPageNo == 0 && !this.listOver) {
					console.log('加载更多------')
					//清空列表
					postIng = false;
					this.pageNo++;
					this.goodsList = [];
					this.getgoodsList();
				}
			},
			/*---------------------------------------函数----------------------------------------*/
			/**
			 * 滚动到底了
			 */
			listtolower: function() {
				console.log('到底了-----');
				if (!postIng && !this.listOver && this.pageNo % this.maxPageNo != 0) {
					this.pageNo++;
					this.getgoodsList();
				}
			},

			/**
			 * 获取一级分类
			 */
			getproductOneCategoryList: function() {
				let than = this;
				than.$api.myPost({
					url: 'productOneCategoryList',
					data: {},
					success(res) {
						if (res.status == 'success' && res.productOneCategoryList) {
							if (res.productOneCategoryList.length > 0) {
								than.productOneCategoryList = res.productOneCategoryList;
								//设置默认选中,请求二级分类
								than.currentId = res.productOneCategoryList[0].id;
								than.getproductTwoCategoryList(res.productOneCategoryList[0].id);
							}
						}
					}
				})
			},

			/**
			 * 获取二级分类
			 */
			getproductTwoCategoryList: function(oneCategoryId) {
				let than = this;
				than.$api.myPost({
					url: 'productTwoCategoryList',
					data: {
						oneCategoryId: oneCategoryId
					},
					success(res) {
						if (res.status == 'success' && res.productTwoCategoryList) {
							if (res.productTwoCategoryList.length > 0) {
								than.productTwoCategoryList = res.productTwoCategoryList;
								than.isvv = true;
							} else {
								than.isvv = false;
							}
							//请求商品列表
							than.getgoodsList();
						}
					}
				})
			},

			/**
			 * 获取商品列表
			 */
			getgoodsList() {
				let than = this;
				if (!postIng) {
					postIng = true;
					var data = {
						pageNo: than.pageNo,
						pageSize: pageSize,
						productType: '0'
					};
					if (than.currentIdTwo) {
						data.twoCategoryId = than.currentIdTwo;
					} else {
						data.oneCategoryId = than.currentId;
					}
					than.$api.myPost({
						url: 'productInfoList',
						data: data,
						success(res) {
							postIng = false;
							if (res.status == 'success' && res.productList) {
								if (res.productList.length == 0 || res.productList.length < pageSize || than.pageNo * pageSize >=
									res.totalSize) {
									than.listOver = true;
								}
								if (res.productList.length > 0) {
									than.$set(than.goodsList, than.pageNo - 1, res.productList);
								}
							}
						},
						fail() {
							postIng = false;
						}
					})
				}
			},

			//右侧栏滚动
			// asideScroll(e) {
			// 	// if(!this.sizeCalcState){
			// 	// 	this.calcSize();
			// 	// }
			// 	// let scrollTop = e.detail.scrollTop;
			// 	// let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
			// 	// if(tabs.length > 0){
			// 	// 	this.currentId = tabs[0].pid;
			// 	// }
			// },
			//计算右侧栏每个tab的高度等信息
			// calcSize() {
			// 	let h = 0;
			// 	this.slist.forEach(item => {
			// 		let view = uni.createSelectorQuery().select("#main-" + item.id);
			// 		view.fields({
			// 			size: true
			// 		}, data => {
			// 			item.top = h;
			// 			h += data.height;
			// 			item.bottom = h;
			// 		}).exec();
			// 	})
			// 	this.sizeCalcState = true;
			// },
			// navToList(sid, tid) {
			// 	uni.navigateTo({
			// 		url: `/pages/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`
			// 	})
			// }
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
		flex-wrap: wrap;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: calc(100% - 104rpx);
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: scroll;
		height: calc(100% - 104rpx);
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
		}
	}

	.top-earch {
		width: 100%;
	}

	.twocategory {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		flex: 1;
		overflow-x: scroll;
		border-bottom: 2rpx solid #EBEEF5;
		white-space: nowrap;
		padding-right: 20rpx;

		view {
			font-size: 26rpx;
			display: inline-block;
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 20rpx;
		}

		.active {
			color: #FA436A;
			font-size: 28rpx;
		}
	}

	.right-aside-t {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
	}

	.right-aside-b {
		width: 100%;
		height: 100%;
		padding-left: 20upx;
	}

	.right-aside-b1 {
		height: calc(100% - 100rpx);
	}
</style>
